<template>
  <basic-container :btnFlag=true @refreashfirstclick="refreashfirstclick()">
    <div class="card-border">
      <div>
        <div class="step-title">
          <img :src="`${publicPath}img/arrows.png`" class="step-img">
          搜索条件
        </div>
      </div>
      <div class="form-group">
        <span class="form-label">关键词:</span>
        <input
          type="text"
          name="key"
          v-model="keyword"
          id="searchInput"
          ref="searchInput"
          placeholder="请输入关键词"
          style="width: 500px;"
          @keyup.enter="searchSubmit()"
        >
        <div class="form-submit">
          <el-button type="warning" size="small" @click.stop="searchSubmit()">查询</el-button>
          <el-button type="info" size="small" @click.stop="searchReset()">重置</el-button>
        </div>
      </div>
      <transition name="fade1">
        <div v-if="!showall">
          <div :class="{showall:true,active:showall}">
            <el-divider></el-divider>
            <avue-search :option="option" v-model="selectedOptions" @change="handleChange"></avue-search>
          </div>
        </div>
      </transition>
      <transition name="fade">
        <div v-if="showall">
          <div :class="{showall:true,active:showall}">
            <el-divider></el-divider>
            <avue-search :option="option" v-model="selectedOptions" @change="handleChange"></avue-search>
          </div>
        </div>
      </transition>
      <div class="search-collapse">
        <div class="collapse-title" :class="{active:showall}" v-on:click="showall=!showall">
          <img v-if="!showall" :src="`${publicPath}img/packdown.png`" class="collapse-title-img">
          <p v-if="!showall" class="collapse-title-text">展开搜索条件</p>
          <img v-if="showall" :src="`${publicPath}img/packUp.png`" class="collapse-title-img">
          <p v-if="showall" class="collapse-title-text">收起搜索条件</p>
        </div>
      </div>
      <div style="margin:18px 0;font-weight: 600;">搜索结果列表</div>

      <avue-crud
        :data="tableData"
        :option="tableOption"
        :page="page"
        :table-loading="tableLoading"
        @on-load="getList"
        @refresh-change="refreshChange"
        class="avuecrud"
      >
      </avue-crud>

    </div>
  </basic-container>
</template>
<script>
  import {PROJECT_DIC} from '@/const/dict'
  import {resultSearchPage, resultHotWord} from "@/api/planning/result";
  import {getAreaByType} from "@/api/system";
  import {getDictType} from "@/util/dict";

  const type = 'area_code_city';
  const code = 3301;
  const obj = Object.assign({
    current: 1,
    size: 200,
    valueLike: 3301,
  });
  export default {
    name: "searchTo",
    created() {
      this.keyword = this.$route.query.keyword;
      this.getarea();
      this.getselectedOptionsHistory();
      window.resultDetail = this.resultDetail;
    },
    data() {
      const getApplyForCategoryDic = _ => {
        return [{
          label: '全部',
          value: '-1',
        }].concat(PROJECT_DIC.CATEGORY)
      };
      const getPlanningRankDic = _ => {
        return [{
          label: '全部',
          value: '-1',
        }].concat(PROJECT_DIC.PLANNING_RANK)
      };
      const getLevelDic = _ => {
        return [{
          label: '全部',
          value: '-1',
        }].concat(PROJECT_DIC.PLANNING_LEVEL)
      };
      const getYearDic = _ => {
        var yearList = [];
        yearList.push({
          label: '全部',
          value: '-1',
        });
        for (var i = 2016; i < 2024; i++) {
          var yearMap = {
            label: i + '年',
            value: i
          };
          yearList.push(yearMap)
        }
        return yearList
      };

      return {
        planningRankDic: getPlanningRankDic(),
        publicPath: process.env.BASE_URL,
        keyword: '',//关键字
        name: "",
        showall: false,
        enumArr: [],
        dictobj: {
          label: '全部',
          value: '-1',
        },
        resetSelectedOptions: {
          category: "-1",
          planningRank: "-1",
          planningLevel: "-1",
          area: '-1',
          areCode: '-1',
          district: '-1',
          year: '-1'
        },
        selectedOptions: {
          category: "-1",
          planningRank: "-1",
          planningLevel: "-1",
          area: '-1',
          district: '-1',
          year: '-1'
        },
        selectedOptionsHistory: {
          category: "-1",
          planningRank: "-1",
          planningLevel: "-1",
          area: '-1',
          district: '-1',
          year: '-1'
        },
        option: {
          column: [
            {
              label: "年份",
              prop: "year",
              multiple: false,
              dicData: getYearDic()
            },
            {
              label: "规划类型",
              prop: "category",
              multiple: false,
              dicData: getApplyForCategoryDic()
            },
            {
              label: "发布等级",
              prop: "planningRank",
              multiple: false,
              dicData: getPlanningRankDic()
            },
            {
              label: "发布层级",
              prop: "planningLevel",
              multiple: false,
              dicData: getLevelDic()
            },
            {
              label: "市级",
              prop: "area",
              multiple: false,
              dicData: this.getarea(),
            },
            {
              label: "区县",
              prop: "district",
              multiple: false,
              dicData: this.arealisttemp,
            },
          ]
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableData: [],
        tableOption: {
          page: true,
          addBtn: false,
          editBtn: false,
          menu: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          cellBtn: false,
          indexWidth:70,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          menuWidth: 150,
          keyId: "id",
          column: [
            {
              label: "规划名称",
              prop: "title",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor: pointer;" onclick="resultDetail(\'' + row.achievementId + '\')">' + value + '</a>';
              }
            },
            {
              label: "年份",
              prop: "year",
              width: 100,
              cell: true,
            },
            {
              label: "发布等级",
              prop: "planningLevel",
              type: "select",
              width: 100,
              dicData: PROJECT_DIC.APPROVING_AUTHORITY_LEVEL,
              cell: true
            },
            {
              label: "申报单位",
              prop: "orgName",
              width: 130,
              cell: true
            },
            {
              label: "规划类型",
              prop: "category",
              type: "select",
              width: 120,
              dicData: PROJECT_DIC.CATEGORY,
              cell: true
            }
          ]
        },
        tableLoading: false,
        arealisttemp: [],
      }
    },
    watch: {
      'selectedOptions.area'(val) {
        var areacode = val.substring(0, 4);
        getAreaByType(Object.assign({
          current: 1,
          size: 200,
          valueLike: areacode,
          type: "area_code_county",
        })).then(response => {
          var records = response.data.data.records;
          var arealist = [];
          arealist.push(this.dictobj);
          for (var item in records) {
            var dictObj = {
              label: records[item].label,
              value: records[item].value
            };
            arealist.push(dictObj)
          }
          this.arealisttemp = arealist;
          for (var item in this.option.column) {
            if (this.option.column[item].prop == "district") {
              this.option.column[item].dicData = this.arealisttemp;
            }
          }
        })
      },
      keyword(val) {
        this.hotSearch(val);
      }
    },
    methods: {
      getList(page) {
        this.tableLoading = true;
        sessionStorage.setItem('this.selectedOptionsHistory.category.searchTo', this.selectedOptions.category);
        sessionStorage.setItem('this.selectedOptionsHistory.planningRank.searchTo', this.selectedOptions.planningRank);
        sessionStorage.setItem('this.selectedOptionsHistory.planningLevel.searchTo', this.selectedOptions.planningLevel);
        sessionStorage.setItem('this.selectedOptionsHistory.area.searchTo', this.selectedOptions.area);
        sessionStorage.setItem('this.selectedOptionsHistory.district.searchTo', this.selectedOptions.district);
        sessionStorage.setItem('this.selectedOptionsHistory.year.searchTo', this.selectedOptions.year);
        sessionStorage.setItem('this.keyword.searchTo', this.keyword);
        resultSearchPage(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          keyword: this.keyword
        }, this.filterFormData(this.selectedOptions))).then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false
        })
      },
      /**
       * 刷新回调
       */
      refreshChange() {
        this.getList(this.page);
      },
      handleChange(form) {

      },
      // 热词搜索
      hotSearch(keyWord) {
        var self = this;
        resultHotWord({keyword: keyWord}).then(response => {
          $(this.$refs.searchInput).autocomplete({
            source: response.data.data,
            select: function (event, ui) {
              self.setSearchInput(ui.item.value)
            },
          });
        })
      },
      setSearchInput(val) {
        this.keyword = val
      },
      // 查询
      searchSubmit() {
        if (this.selectedOptions.district != -1) {
          this.selectedOptions.areaCode = this.selectedOptions.district
        } else {
          this.selectedOptions.areaCode = this.selectedOptions.area
        }
        this.getList(this.page)
      },
      // 重置
      searchReset() {
        this.keyword = '';
        this.selectedOptions = this.resetSelectedOptions;
        this.getList(this.page)
      },
      filterFormData(form) {
        var formMap = {};
        Object.keys(form).forEach(function (name) {
          if (form[name] != -1) {
            formMap[name] = form[name]
          }
        });
        return formMap;
      },
      resultDetail(achievementId) {
        sessionStorage.setItem('detailClick', 'true');
        let src = `/planning/achievement/detail?id=${achievementId}`;
        this.$router.push({
          path: src
        })
      },
      getarea() {
        getAreaByType(Object.assign({
          current: 1,
          size: 200,
          valueLike: 33,
          type: "area_code_city"
        })).then(response => {
          var records = response.data.data.records;
          var arealist = [];
          arealist.push(this.dictobj);
          for (var item in records) {
            var dictObj = {
              label: records[item].label,
              value: records[item].value
            };
            arealist.push(dictObj)
          }
          this.arealisttemp = arealist;
          for (var item in this.option.column) {
            if (this.option.column[item].prop == "area") {
              this.option.column[item].dicData = this.arealisttemp;
            }
          }
        })
      },
      getselectedOptionsHistory() {
        if (sessionStorage.getItem('this.selectedOptionsHistory.category.searchTo') != null) {
          this.selectedOptionsHistory.category = sessionStorage.getItem('this.selectedOptionsHistory.category.searchTo')
        }
        if (sessionStorage.getItem('this.selectedOptionsHistory.planningRank.searchTo') != null) {
          this.selectedOptionsHistory.planningRank = sessionStorage.getItem('this.selectedOptionsHistory.planningRank.searchTo')
        }
        if (sessionStorage.getItem('this.selectedOptionsHistory.planningLevel.searchTo') != null) {
          this.selectedOptionsHistory.planningLevel = sessionStorage.getItem('this.selectedOptionsHistory.planningLevel.searchTo')
        }
        if (sessionStorage.getItem('this.selectedOptionsHistory.district.searchTo') != null) {
          this.selectedOptionsHistory.district = sessionStorage.getItem('this.selectedOptionsHistory.district.searchTo')
        }
        if (sessionStorage.getItem('this.selectedOptionsHistory.year.searchTo') != null) {
          this.selectedOptionsHistory.year = sessionStorage.getItem('this.selectedOptionsHistory.year.searchTo')
        }
        if (sessionStorage.getItem('this.selectedOptionsHistory.area.searchTo') != null) {
          this.selectedOptionsHistory.area = sessionStorage.getItem('this.selectedOptionsHistory.area.searchTo')
        }

        var selectedOptionsHistory = this.selectedOptionsHistory;
        this.selectedOptions = selectedOptionsHistory;
        if (this.selectedOptions.district != -1) {
          this.selectedOptions.areaCode = this.selectedOptions.district
        } else {
          this.selectedOptions.areaCode = this.selectedOptions.area
        }
        this.keyword = sessionStorage.getItem('this.keyword.searchTo');
        if (this.$route.query.keyword != null && sessionStorage.getItem('firstclick') != 'true' && sessionStorage.getItem('detailClick') == 'false') {
          this.keyword = this.$route.query.keyword;
          this.selectedOptions = {
            category: "-1",
            planningRank: "-1",
            planningLevel: "-1",
            area: '-1',
            district: '-1',
            year: '-1'
          };
          sessionStorage.setItem('firstclick', 'true')
        }
      },
      refreashfirstclick() {
        sessionStorage.setItem('firstclick', 'false');
      },


    }
  };
</script>

<style lang="scss" scoped>
  .card-border {
    border: 1px solid #d2d2d2;
    padding: 12px;
  }

  .step-title {
    display: inline-block;
    border-bottom: solid #ec950a;
    padding-bottom: 10px;
    font-weight: 600;
  }

  .step-button {
    float: right;
  }

  .step-img {
    width: 25px;
    position: relative;
    left: 0px;
    top: 7px;
  }

  .form-group {
    margin-top: 1rem;
  }

  .form-label {
    font-weight: 600;
    margin-right: 2rem;
  }

  .form-padding {
    padding-left: 50px;
  }

  .form-label-small {
    font-size: 14px;
    margin-right: 2rem;
  }

  .form-submit {
    float: right;
  }

  .collapse-title {
    margin-top: -1rem;
    text-align: center;
    border-top: 1px solid #dedbdb;
    border-bottom: 1px solid #dedbdb;
  }

  .collapse-title-text {
    color: #4297dc;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    margin-left: 0.2rem;
    margin: 10px 0px;
  }

  .collapse-title-img {
    width: 1.2rem;
    position: relative;
    top: 0.25rem;
  }


  .showall {
    padding: 10px;
    height: 0px;
    overflow: hidden;

    .fade-enter-active {
      transition: opacity 0.9s ease-out;
    }

    .fade-leave-active {
      transition: opacity 0s ease-out;
    }

    .fade-enter, .fade-leave-to {
      opacity: 0;
    }

    .fade1-enter-active {
      transition: opacity 0.9s ease-out;
    }

    .fade1-enter, .fade1-leave-to {
      opacity: 0;
    }

    clear: both;
    /*margin-top: 6px;*/
  }

  .showall.active {
    height: auto;
    background: #fff;
    min-height: 150px;
  }

  .imgbtn {
    border-top: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 10px
  }

  .fade-enter-active {
    transition: opacity 0.9s ease-out;
  }

  .fade-leave-active {
    transition: opacity 0s ease-out;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

  .fade1-enter-active {
    transition: opacity 0.9s ease-out;
  }

  .fade1-enter, .fade1-leave-to {
    opacity: 0;
  }

  .search-collapse {
    margin-top: 1rem;
  }

  #searchInput {
    height: 40px;
    border: 1px solid #dadada;
    outline: 0;
    line-height: 40px;
    text-indent: 1rem;
    border-radius: 0.31rem;
  }

  /deep/ .avue-search__title {
    padding: 0 26px;
    margin-left: -13px;
  }
  /deep/.avue-search__tags--active {
    color: #fff;
    background-color: #1890ff;
    border-radius: 5px;
    padding: 5px 10px;
  }
</style>

